<template>
	<view>
		<view class="head">
			<view class="line-l" v-if="left">

			</view>
			<view class="line-r" v-else>

			</view>
			<view class="wz" @tap="change()">
				精选文章
			</view>
			<view class="pp" @tap="change()">
				品牌列表
			</view>
		</view>
		<view class="main" v-if="left">
			<view class="box" v-for="(item,index) in wzList" :key="item.id">
				<image :src="item.coverImg" mode=""></image>
				<view class="text">
					<view class="top">
						{{item.title}}
					</view>
					<view class="down">
						{{item.author}}
					</view>
				</view>
				<view class="foot">
					<view class="iconbox">
						<image src="/static/icons/view.png" mode=""></image>
						<!-- <view class="colbox" @tap="col(index)">
							<image v-if="item.isCol" src="../../static/icons/collect1-active.png" mode=""></image>
							<image v-else src="/static/icons/collect1.png" mode=""></image>
						</view> -->
						<view class="colbox" @tap="col(item)">
							<image v-if="item.isCol" src="../../static/icons/collect1-active.png" mode=""></image>
							<image v-else src="/static/icons/collect1.png" mode=""></image>
						</view>
						
					</view>
					
				</view>
			</view>

		</view>
		<view class="main-r" v-else>
			<view class="box" v-for="item in ppList" :key="item.id">
				<image :src="item.bigPic" mode=""></image>

				<view class="foot">
					<view class="text">
						<view class="top">
							{{item.name}}
						</view>
						<view class="down">
							{{item.brandStory}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findBrandsByPage,
		findArticleByPage
	} from "../../api/home/index.js"
	export default {
		data() {
			return {
				wzList: [],
				ppList: [],
				article:[],
				left: true
			}
		},
		onLoad() {
			this.getwzList(),
				this.getppList()
		},
		methods: {

			getwzList() {
				findArticleByPage(1, 10).then(res => {
					console.log(res);
					this.wzList = res.data.rows
					this.wzList.forEach(el=>{
						el.isCol = false
					})
					var article = uni.getStorageSync('article') || []
					console.log(article)
					this.article = article;
					for(var i = 0; i<article.length; i++){
						this.wzList.forEach(el=>{
							if(el.id == article[i].id){
								el.isCol = true
							}
						})
					}
					
				})
			},
			getppList() {
				findBrandsByPage(1, 10).then(res => {
					console.log(res);
					this.ppList = res.data.rows
				})
			},
			change() {
				this.left = !this.left;
			},
			// col(val){
			// 	console.log(val)
			// 	this.wzList[val].isCol = true
			// 	console.log(this.wzList)
			// }
			col(val){
				var info = this.wzList.find(el=> el.id == val.id)
				console.log(info)
				if(info.isCol){
					var index = this.article.findIndex(el =>el.id == val.id)
					this.article.splice(index,1)
				}else{
					this.article.push(val)
				}
				uni.setStorageSync('article',this.article)
				this.getwzList()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.head {
		display: flex;
		position: relative;
		// justify-content: space-around;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 88rpx;
		background-color: #354e44;
		color: #fff;
		font-size: 32rpx;

		.wz {
			margin-right: 20rpx;
			// position: relative;
		}

		.pp {
			margin-left: 20rpx;
			// position: relative;
		}

		.line-l {

			position: absolute;
			top: 75rpx;
			left: 228rpx;
			background-color: #909E98;
			width: 128rpx;
			height: 4rpx;
		}

		.line-r {
			position: absolute;
			top: 75rpx;
			right: 228rpx;
			background-color: #909E98;
			width: 128rpx;
			height: 4rpx;
		}
	}

	.main {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-top: 20rpx;

		// width: 80%;
		.box {
			position: relative;
			width: 80%;
			height: 480rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;

			image {
				background-color: #8F8F94;
				width: 100%;
				height: 380rpx;
			}

			.text {
				position: absolute;
				bottom: 140rpx;
				left: 20rpx;

				.top {
					color: #fff;
					font-size: 48rpx;
					line-height: 68rpx;
				}

				.down {

					color: #fff;
					font-size: 30rpx;
					line-height: 42rpx;
				}
			}

			.foot {
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				
				.iconbox{
					padding: 0 60rpx;
					// width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					image{
						background-color: #fff;
						width: 40rpx;
						height: 40rpx;
					}
				}
				
			}
		}
	}

	.main-r {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-top: 20rpx;

		// width: 80%;
		.box {
			// position: relative;
			width: 80%;
			height: 480rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;

			image {
				background-color: #8F8F94;
				width: 100%;
				height: 380rpx;
			}

			.text {
				// position: absolute;
				// bottom: 140rpx;
				// left: 20rpx;
				// display: flex;
				// flex-direction: column;
				// justify-content: center;

				.top {
					font-size: 32rpx;
					line-height: 44rpx;
					color: #3e3e3e;
					font-weight: 700;
					
				}

				.down {

					font-size: 22rpx;
					color: #b1b1b1;
					line-height: 30rpx;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.foot {
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 20rpx;
				
			}
		}
	}
</style>
